<template>
  <div class="app-container customer-div">
    <el-menu :default-active="materialParams.type" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="self">我负责的</el-menu-item>
      <el-menu-item index="sub" v-if="isCanCustomerByDept">部门</el-menu-item>
      <el-menu-item index="all" v-if="isCanCustomerByAll">全部</el-menu-item>
    </el-menu>
    <div style="margin-top: 20px">
      <el-button size="small" type="primary" @click="showMaterialDialog('add',null)" v-if="materialParams.type == 'self'">新增使用材料</el-button>
    </div>
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="materialParams" size="mini" label-width="100px">
        <el-form-item label="关键字：">
          <el-input v-model="materialParams.keyword" placeholder="请输入" style="width:195px"></el-input>
        </el-form-item>
        <el-form-item label="所需材料：">
          <div style="display: inline-block;vertical-align: text-top;position: relative;margin-top:-5px" class="select-div">
            <el-popover
                    placement="bottom"
                    width="500"
                    v-model="visible"
                    trigger="click">
              <el-tabs v-model="activeTabName">
                <el-tab-pane :label="item.categoryName" v-for="(item,index) in indexCategoriesList" :key="index" :name="'name'+index">
                  <div class="category-pane">
                    <div class="pane-item" v-for="paneItem in item.children">
                      <div class="item-title">{{paneItem.letter}}</div>
                      <div class="item-right">
                            <span class="item-span"
                                  :title="spanItem.categoryName"
                                  v-for="spanItem in paneItem.list"
                                  @click="changeCategory(spanItem,2)">
                              {{spanItem.categoryName}}
                            </span>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
              <el-input v-model="materialParams.categoryName"  style="width:120px" slot="reference" placeholder="请选择分类" clearable @change="changeCategory(null,2)"></el-input>
            </el-popover>
          </div>
          <div style="display: inline-block;vertical-align: text-top;margin-top:-5px" class="select-div">
            <el-popover
                    placement="bottom"
                    width="500"
                    v-model="visible2"
                    trigger="click">
              <div class="category-pane">
                <div class="pane-item" v-for="item in indexbandList">
                  <div class="item-title">{{item.letter}}</div>
                  <div class="item-right">
													<span class="item-span"
                                                          :title="spanItem.brandName"
                                                          v-for="spanItem in item.list"
                                                          @click="changeBrandId(spanItem,2)">
														{{spanItem.brandName}}
													</span>
                  </div>
                </div>
                <div style="font-size:12px;text-align: center;color:#888;padding:15px 0" v-if="bandList.length == 0">暂无数据</div>
              </div>
              <el-input v-model="materialParams.brandName"  style="width:120px" slot="reference" placeholder="请选择厂家" clearable @change="changeBrandId(null,2)"></el-input>
              <el-input v-model="materialParams.brandId" style="display: none"></el-input>
            </el-popover>
          </div>
          <div style="display: inline-block;vertical-align: text-top;margin-top:-5px">
            <el-select v-model="materialParams.goodsSn"  placeholder="请选择牌号" clearable style="width:120px">
              <el-option
                      v-for="item in indexgoodsSnList"
                      :key="item.goodsSn"
                      :label="item.goodsSn"
                      :value="item.goodsSn">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-select
            clearable
            v-model="materialParams.customerId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购评级：" prop="customerLabel">
          <el-select v-model="materialParams.customerLabel"  placeholder="请选择" clearable>
            <el-option value="A类" label="A类" key="A类"></el-option>
            <el-option value="B类" label="B类" key="B类"></el-option>
            <el-option value="C类" label="C类" key="C类"></el-option>
            <el-option value="D类" label="D类" key="D类"></el-option>
            <el-option value="E类" label="E类" key="E类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月使用量：" >
          <el-select v-model="materialParams.cycleNumber"  placeholder="请选择" clearable>
            <el-option
              v-for="item in cycleNumberOptionList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购周期：">
          <el-select v-model="materialParams.cycleDays"  placeholder="请选择" clearable>
            <el-option
              v-for="item in cycleDaysOptionList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购周期：">
          <el-select v-model="materialParams.cycleDays"  placeholder="请选择" clearable>
            <el-option
              v-for="item in cycleDaysOptionList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户行业：" >
          <el-select v-model="materialParams.customerIndustry" multiple>
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerIndustryList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" 供应商：" >
          <el-input v-model="materialParams.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="业务员：">
          <el-select v-model="materialParams.chargeId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="materialLoading"
        :data="materialList"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
                width="300"
                prop="customerName"
                label="公司名称">
          <template slot-scope="scope">
            <el-link @click="toDetail(scope.row)" type="primary">
              {{scope.row.customerName}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="采购评级">
          <template slot-scope="scope">
            {{scope.row.customerLabel}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="客户行业">
          <template slot-scope="scope">
            {{scope.row.customerIndustry}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="业务员">
          <template slot-scope="scope">
            {{scope.row.chargeName}}
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          prop="categoryName"
          label="材料名称">
          <template slot-scope="scope">
            {{scope.row.categoryName}} {{scope.row.brandName}} {{scope.row.goodsSn}}
          </template>
        </el-table-column>
        <el-table-column
          prop="cycleNumber"
          label="每月用量"
          align="center">
        </el-table-column>
        <el-table-column
          prop="cycleDays"
          label="采购周期"
          align="center">
        </el-table-column>
        <el-table-column
          prop="supplierName"
          label="供应商"
          align="center">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center">
        </el-table-column>
        <el-table-column
          prop="creatorName"
          label="创建人"
          align="center">
        </el-table-column>
        <el-table-column
          label="创建类型"
          align="center">
          <template slot-scope="scope">
            {{scope.row.creatorType}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="上月采购量">
          <template slot-scope="scope">
             {{scope.row.lastMonthBuyNum}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="本月采购量">
          <template slot-scope="scope">
            {{scope.row.thisMonthBuyNum}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="差异">
          <template slot-scope="scope">
            <span style="color:red" v-if="scope.row.diffBuyNum < 0">{{scope.row.diffBuyNum}}</span>
            <span style="color:green" v-if="scope.row.diffBuyNum > 0">+{{scope.row.diffBuyNum}}</span>
            <span  v-if="scope.row.diffBuyNum == 0">{{scope.row.diffBuyNum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="150"
          label="创建日期">
          <template slot-scope="scope">
             {{scope.row.createdAt}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="状态">
          <template slot-scope="scope">
             {{scope.row.status == 1 ? '正常' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="100"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              @click="showMaterialDialog('edit',scope.row)"
              v-if="materialParams.type == 'self'"
              type="text"
              size="mini">修改
            </el-button>
            <el-button
                    @click="showMaterialDialog('see',scope.row)"
                    v-if="materialParams.type != 'self'"
                    type="text"
                    size="mini">查看
            </el-button>
            <el-button
              v-if="materialParams.type == 'self'"
              @click="delMaterial(scope.row)"
              type="text"
              size="mini">{{ scope.row.status == 1 ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChangeMaterial"
        @current-change="handleCurrentChangeMaterial"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="materialParams.pageNum"
        :page-size="materialParams.pageSize"
        :page-sizes="[10,15,20]"
        :total="materialCount">
      </el-pagination>
    </div>

    <!--新增/编辑使用材料-->
    <el-dialog
            :close-on-click-modal="false"
      :title="title4"
      :beforeClose="handleClose4"
      :visible.sync="dialogVisible4"
      width="800px">
      <el-form :model="materialForm" size="mini" label-width="100px" :rules="rules4" ref="materialForm">
        <el-form-item label="客户名称：" prop="customerId">
          <el-select
            disabled
            v-model="materialForm.customerId"
            filterable
            remote
            reserve-keyword
            :remote-method="remoteMethod2"
            :loading="loading">
            <el-option
              v-for="item in customerList2"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用材料：" prop="categoryId">
          <div v-if="showMaterialType != 'see'">
            <div style="display: inline-block;vertical-align: text-top">
              <el-select
                      clearable
                      v-model="cutCategory"
                      filterable
                      remote
                      value-key="categoryId"
                      reserve-keyword
                      placeholder="请输入分类关键词"
                      @change="changeCategory"
                      :remote-method="remoteMethod1"
                      :loading="categoriesloading">
                <el-option
                        v-for="item in categoriesList" :key="item.categoryId" :label="item.parentCategoryName+'/'+item.categoryName " :value="item">
                </el-option>
              </el-select>
            </div>
            <div style="display: inline-block;vertical-align: text-top">
              <el-select
                      clearable
                      v-model="cutBrand"
                      filterable
                      remote
                      value-key="brandId"
                      reserve-keyword
                      placeholder="请输入厂家关键词"
                      @change="changeBrandId">
                <el-option
                        v-for="item in bandList" :key="item.brandId" :label="item.brandName" :value="item">
                </el-option>
              </el-select>
            </div>
            <div style="display: inline-block;vertical-align: text-top">
              <el-select
                      clearable
                      v-model="materialForm.goodsSn"
                      filterable
                      remote
                      value-key="goodsSn"
                      reserve-keyword
                      placeholder="请输入牌号关键词">
                <el-option
                        v-for="item in goodsSnList" :key="item.goodsSn" :label="item.goodsSn" :value="item.goodsSn">
                </el-option>
              </el-select>
            </div>
          </div>

          <div v-else>
            <span v-if="materialForm.categoryName !=''">{{materialForm.categoryName}} / </span>
            <span v-if="materialForm.brandName !=''">{{materialForm.brandName}} / </span>
            <span v-if="materialForm.goodsSn !=''">{{materialForm.goodsSn}}</span>
          </div>

        </el-form-item>
        <el-form-item label="月使用量：" >
          <el-select v-model="materialForm.cycleNumber"  placeholder="请选择" clearable :disabled="showMaterialType == 'see'">
            <el-option
              v-for="item in cycleNumberOptionList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购周期：">
          <el-select v-model="materialForm.cycleDays"  placeholder="请选择" clearable :disabled="showMaterialType == 'see'">
            <el-option
              v-for="item in cycleDaysOptionList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" 供应商：" >
          <el-input v-model="materialForm.supplierName" :disabled="showMaterialType == 'see'"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="materialForm.remark" type="textarea" :rows="2" :disabled="showMaterialType == 'see'" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="showMaterialType != 'see'">
          <el-button @click="handleClose4">取 消</el-button>
          <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-else>
          <el-button @click="handleClose4">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import {getGoodsList,
        getCategoriesList,
        getBrandList,
        getGoodsSnList,
        saveMaterial,
        getCustomerOption,categoriesLike,brandLike,getUserOption,getCustomerSetting} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import {validatePhone} from '@/utils/validate';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultContactForm = {
        customerId:'',
        customerName:'',
        contactName:'',
        contactMobile:'',
        contactDuty:'',
        contactHobby:'',
        contactFocus:'',
        contactAddress:'',
        contactSex:'',
        contactEmail:'',
        contactBirthday:'',
        isMainContact:'',
        remark:''
    };
    const defaultMaterialForm = {
        customerId:'',
        customerName:'',
        categoryId:'',
        categoryName:'',
        brandId:'',
        brandName:'',
        goodsSn:'',
        supplierName:'',
        cycleDays:'',
        cycleNumber:'',
        remark:'',
    }
    export default {
        name: "material",
        data(){
            const isvalidatePhone = (rule, value, callback) => {
                if(!validatePhone(value)){
                    callback(new Error('请输入正确的手机号'))
                } else {
                    callback()
                }
            };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                materialParams:{
                    type:'self',
                    pageNum:1,
                    pageSize:10,
                    customerId:'',
                    cycleNumber:'',
                    cycleDays:'',
                    supplierName:'',
                    keyword:'',
                    categoryId:'',
                    categoryName:'',
                    brandId:'',
                    brandName:'',
                    goodsSn:'',
                    customerLabel:'',
                    customerIndustry:[],
                    chargeId:''

                },
                materialList:[],
                materialCount:0,
                materialLoading:false,
                title4:'',
                dialogVisible4:false,
                materialForm:JSON.parse(JSON.stringify(defaultMaterialForm)),
                rules4:{
                    customerId:[{required: true, message: '请选择客户', trigger: 'change'},],
                    categoryId:[{required: true, message: '请选择分类', trigger: 'change'},],
                },
                btnLoading4:false,
                cycleNumberOptionList:['1吨以下','1-5吨','5-10吨','10-20吨','20-40吨','40-80吨','80吨以上'],
                cycleDaysOptionList:['一周1次','两周1次','一月1次','一月2次','一月3次','二月1次','不固定'],
                categoriesList:[],
                bandList : [],
                goodsSnList: [],
                activeTabName:'name0',
                visible:false,
                visible2:false,
                brandType:1,
                goodsSnType:1,
                activities:[],
                loading:false,
                customerList:[],
                customerList2:[],
                showMaterialType:'',
                visible4:false,
                visible5:false,
                categoriesloading:false,
                brandLoading:false,
                cutCategory:{},
                cutBrand:{},
                indexCategoriesList:[],
                indexbandList:[],
                indexgoodsSnList:[],
                userOptionList:[],
                customerIndustryList:[]
            }
        },
        created() {
            this.getUserOptionList();
            this.getCustomerSettingList();
            this.getMaterialList();
            this.getCategoriesListData();

        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),
            isCanMaterialByAdd(){
                if(this.roles.indexOf("materialByAdd") != -1){
                    return true
                }else{
                    return false
                }
            },
            isCanMaterialByEdit(){
                if(this.roles.indexOf("materialByEdit") != -1){
                    return true
                }else{
                    return false
                }
            },
            isCanMaterialDelete(){
                if(this.roles.indexOf("materialDelete") != -1){
                    return true
                }else{
                    return false
                }
            },
          isCanCustomerByDept(){
            if(this.roles.indexOf("customerByDept") != -1){
              return true
            }else{
              return false
            }
          },
          isCanCustomerByAll(){
            if(this.roles.indexOf("customerByAll") != -1){
              return true
            }else{
              return false
            }
          },
        },
        filters: {
            formatTime(time) {
                if(time){
                    let date = new Date(time);
                    return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
                }else{
                    return ''
                }

            },
        },
        methods:{
          //获取客户配置
          getCustomerSettingList(){
            getCustomerSetting().then((res)=>{
              res.forEach((el)=>{
                 if(el.cdtCode == 'customer_industry'){
                  this.customerIndustryList = el.data;
                }
              });
            })
          },
          //获取员工下拉选项
          getUserOptionList(){
            getUserOption().then((res)=>{
              this.userOptionList = res;
            })
          },
          //获取分类列表
          remoteMethod1(query) {
            if(query && query!= ''){
              this.categoriesloading = true;
              categoriesLike({keyword:query}).then(response => {
                this.categoriesList = response;
                this.categoriesloading = false;
              }).catch(()=>{
                this.categoriesloading = false;
              });
            }
          },
          //切换分类-弹窗
          changeCategory1(e){
            this.materialForm.categoryId = '';
            this.materialForm.categoryName = '';
            this.bandList = [];
            this.goodsSnList = [];
            this.materialForm.brandId = '';
            this.materialForm.brandName = '';
            this.materialForm.goodsSn = '';
            this.cutBrand = {};
            if(e){
              this.materialForm.categoryId = JSON.parse(JSON.stringify(e.categoryId));
              this.materialForm.categoryName = JSON.parse(JSON.stringify(e.categoryName));
            }
            if(this.materialForm.categoryId && this.materialForm.categoryId != ''){
              brandLike({categoryId:this.materialForm.categoryId}).then(response => {
                this.bandList = response;
                this.brandLoading = false;
              }).catch(()=>{
                this.brandLoading = false;
              });
            }
          },

          //切换分类
          changeCategory(e,type){
              if(!type){
                this.changeCategory1(e)
              }else{
                this.visible = false;
                this.indexbandList = [];
                this.indexgoodsSnList = [];
                this.materialParams.categoryId = '';
                this.materialParams.categoryName = '';
                this.materialParams.brandId = '';
                this.materialParams.brandName = '';
                this.materialParams.goodsSn = '';
                if(e){
                  this.materialParams.categoryId = JSON.parse(JSON.stringify(e.categoryId));
                  this.materialParams.categoryName = JSON.parse(JSON.stringify(e.categoryName));
                  if(this.materialParams.categoryId && this.materialParams.categoryId != ''){
                    getBrandList({categoryId:this.materialParams.categoryId}).then((res)=>{
                      this.indexbandList = res;
                    })
                  }
                }

              }

          },
          //切换厂家
          changeBrandId(val,type){
              if(!type){
                this.changeBrandId1(val);
              }else{
                this.indexgoodsSnList = [];
                this.visible2= false;
                this.materialParams.brandName = '';
                this.materialParams.brandId = '';
                this.materialParams.goodsSn = '';
                if(val){
                  this.materialParams.brandName = val.brandName;
                  this.materialParams.brandId = val.brandId;
                  this.materialParams.goodsSn = '';
                  if(this.materialParams.brandId){
                    getGoodsSnList({categoryId:this.materialParams.categoryId,brandId:this.materialParams.brandId}).then((res)=>{
                      this.indexgoodsSnList = res;
                    })
                  }
                }
              }

          },


          //切换厂家-弹窗
          changeBrandId1(val){
            this.materialForm.brandName = '';
            this.materialForm.brandId = '';
            if(val){
              this.materialForm.brandName = val.brandName;
              this.materialForm.brandId = val.brandId;
            }
            this.materialForm.goodsSn = '';
            this.goodsSnList = [];
            if(this.materialForm.brandId){
              getGoodsSnList({categoryId:this.materialForm.categoryId,brandId:this.materialForm.brandId}).then((res)=>{
                this.goodsSnList = res;
              })
            }
          },

            //去详情页
            toDetail(item){
              this.$router.push({name:'customerDetail',query:{id:item.customerId}})
            },
            //获取客户列表
            remoteMethod(query) {
                if(query && query!= ''){
                    this.loading = true;
                    getCustomerOption({keywords:query}).then(response => {
                        this.customerList = response;
                        this.loading = false;
                    }).catch(()=>{
                        this.loading = false;
                    });
                }
            },
            //获取客户列表
            remoteMethod2(query) {
                if(query && query!= ''){
                    this.loading = true;
                  let data = {};
                  data.keywords = query;
                  if(this.materialParams.type == 'self'){
                    data.chargeId = this.userId
                  }
                    getCustomerOption(data).then(response => {
                        this.customerList2 = response;
                        this.loading = false;
                    }).catch(()=>{
                        this.loading = false;
                    });
                }

            },
            /**
             * 切换选择状态
             */
            handleSelect(key, keyPath){
                this.materialParams.type = key;
                this.handleSearchList();
            },
            //获取客户使用材料
            getMaterialList(){
                this.materialLoading = true;
                getGoodsList(this.materialParams).then((res)=>{
                    this.materialList = res.list;
                    this.materialCount = res.count;
                    this.materialLoading = false;
                })
            },
            handleSearchList(){
                this.materialParams.pageNum = 1;
                this.getMaterialList();
            },
            handleSizeChangeMaterial(val){
                this.materialParams.pageNum = 1;
                this.materialParams.pageSize = val;
                this.getMaterialList();
            },
            handleCurrentChangeMaterial(val){
                this.materialParams.pageNum = val;
                this.getMaterialList();
            },

            //显示编辑/新增使用材料
            showMaterialDialog(type,item){
                this.title4 = type == 'add' ? '新增使用材料' : type == 'edit' ? '编辑使用材料' : '查看使用材料';
                this.showMaterialType = type;
                if(type=='add'){
                    this.$router.push({name:'addmaterial'})
                }else{
                    this.dialogVisible4 = true;
                  this.materialForm = JSON.parse(JSON.stringify(item));
                  this.remoteMethod2(item.customerName);
                  if(this.materialForm.categoryId && this.materialForm.categoryId != ''){
                    this.cutCategory.categoryId = this.materialForm.categoryId;
                    this.cutCategory.categoryName = this.materialForm.categoryName;
                    categoriesLike({keyword:this.cutCategory.categoryName}).then(response => {
                      this.categoriesList = response;
                    }).catch(()=>{
                    });
                    brandLike({categoryId:this.materialForm.categoryId}).then(response => {
                      this.bandList = response;
                      this.brandLoading = false;
                    }).catch(()=>{
                      this.brandLoading = false;
                    });
                  }
                  if(this.materialForm.brandId && this.materialForm.brandId != ''){
                    this.cutBrand.brandId = this.materialForm.brandId;
                    this.cutBrand.brandName = this.materialForm.brandName;
                    getGoodsSnList({categoryId:this.materialForm.categoryId,brandId:this.materialForm.brandId}).then((res)=>{
                      this.goodsSnList = res;
                    })
                  }

                }
            },

            //关闭客户使用材料
            handleClose4(){
                this.$refs.materialForm.clearValidate();
                this.dialogVisible4 = false;
                this.btnLoading4 = false;
                this.bandList = [];
                this.goodsSnList = [];
                this.activeTabName = 'name0';
                this.visible4 = false;
                this.visible5 = false;
                this.brandType= 1;
                this.goodsSnType = 1;
                this.customerList2 = [];
            },

            //提交客户使用材料
            handleConfirm4(){
                this.$refs.materialForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading4 = true;
                        saveMaterial(this.materialForm).then(()=>{
                            this.btnLoading4 = false;
                            this.handleClose4();
                            this.getMaterialList()
                        })
                    }
                });
            },

            //删除客户使用材料
            delMaterial(item){
                let text = item.status == 1 ? '确定禁用使用材料?' : '确定启用使用材料?'
                let status = item.status == 1 ? 2 : 1;
                this.$confirm(text, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    saveMaterial({status:status,ugId:item.ugId,customerId:item.customerId}).then(()=>{
                        this.getMaterialList();
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },

            //获取分类列表
            getCategoriesListData(){
                getCategoriesList().then((res)=>{
                    this.indexCategoriesList = res;
                })
            },




            //切换牌号输入形式
            changeGoodsSnType(){
                this.goodsSnType = this.goodsSnType == 1 ? 2 : 1 ;
                this.materialForm.goodsSn = '';
            },
            //切换厂家输入形式
            changeBrandType(){
                this.brandType = this.brandType == 1 ? 2 : 1 ;
                if(this.brandType == 2){ //厂家自定义时，牌号也要变为自定义
                    this.goodsSnType = 2
                }
                this.materialForm.brandName = '';
                this.materialForm.brandId = '';
                this.materialForm.goodsSn = '';
                this.goodsSnList = [];
            },
        },
    }
</script>

<style scoped lang="scss">
  .category-pane{
    max-height: 250px;
    overflow: auto;
    .pane-item{
      display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox; /* TWEENER - IE 10 */
      display: -webkit-flex; /* NEW - Chrome */
      display: flex;
      /* 09版 */
      -webkit-box-align: flex-start;
      /* 12版 */
      -webkit-align-items:flex-start;
      -moz-align-items: flex-start;
      -ms-flex-align: flex-start;
      -o-align-items: flex-start;
      align-items:flex-start;
      -webkit-box-pack:flex-start;
      -ms-flex-pack: flex-start;
      justify-content: flex-start;
      margin-top:10px;
      .item-title{
        font-size:14px;
        color:#333;
        font-weight:bold;
        width:30px;
      }
      .item-right{
        width:calc(100% - 30px);
        font-size:12px;
        color:#888;
        .item-span{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          line-height: 22px;
          padding:0 5px;
          cursor: pointer;
          margin-right:10px;
        }
      }
    }
  }
</style>
